<template>
	<view  class="container">
    <!-- 页面头部 -->
    <view class="main-header" :style="{ height:'400rpx', paddingTop: '80rpx' }">
<!--      <view class="bg-image"></view>-->
      <image :src="$Config.get('imageUrl')+'/user/bg.png'"  class="bg-image"/>
      <!-- 用户信息 -->
      <view v-if="isLogin" class="user-info" style="justify-content: space-between">
        <view class="user-content" >
          <!-- 会员昵称 -->
          <view class="nick-name oneline-hide" @click="handlePersonal()" >
            <view class="name">{{ userInfo.nickName }}</view>
            <view class="mobile">ID：{{ userInfo.userId }}</view>
          </view>
          <view class="userLevel">
            <view class="level-icon">
              <image :src="$Config.get('imageUrl')+'/user/userLevel.png'"  class="level-img"/>
            </view>
            <view class="level-txt">{{ getUserLevel(userInfo.userLevel) }}</view>
          </view>
          <!-- 手机号 -->

        </view>
        <view class="setting" @click="goSetting">
          <image :src="$Config.get('imageUrl')+'/user/setting.png'"  class="set-img"/>
          <span>设置</span>
        </view>
      </view>
      <!-- 未登录 -->
      <view v-else class="user-info" @click="handleLogin" >
        <view class="user-avatar">

        </view>
        <view class="user-content">
          <view class="nick-name">未登录</view>
          <view class="login-tips">点击登录账号</view>
        </view>
      </view>
    </view>
    <!-- 页面内容 -->
    <view class="content">
      <view class="box b1" @click="goOrder">
        <view class="title">
          <span>我的采购订单</span>
          <uni-icons type="forward" size="18" class="arrow" color="#010812"></uni-icons>
        </view>
        <view class="order">
          <image :src="$Config.get('imageUrl')+'/user/i1.png'" class="o-img"/>
          <view class="sum">
            {{ getNumber(stat.totalOrderAmount) }}
          </view>
          <view class="o-t">
            采购总金额
          </view>
        </view>
      </view>
      <view class="box1">
        <view class="shareholding" @click="goDividends">
          <view class="s-img">
            <image :src="$Config.get('imageUrl')+'/user/i2.png'" class="img"/>
          </view>
          <view class="s-num">
            <span>{{ getNumber(stat.shareAmount) }}</span>
            <uni-icons type="forward" size="18" class="arrow" color="#010812" style="margin-top: -8rpx;"></uni-icons>
          </view>
          <view class="s-txt">
            我的股权分红份额
          </view>
        </view>
        <view class="shareholding">
          <view class="s-img">
            <image :src="$Config.get('imageUrl')+'/user/i3.png'"class="img"/>
          </view>
          <view class="s-num">
            {{ getNumTimes(stat.shareRate ,100) }}
          </view>
          <view class="s-txt">
            我的股权分红占比(%)
          </view>
        </view>
      </view>
      <view class="box b1 b2">
        <view class="title">

          <view class="left" @click="popup2 = true">
            <view>我的邀请</view>
            <view class="iconfont icon-help arrow"></view>
          </view>
          <view class="right" @click="goInvite">
            <span class="text">查看明细</span>
            <uni-icons type="forward" size="14" class="arrow" color="#1777FF"></uni-icons>
          </view>

        </view>
        <view class="title-1">
          <image :src="$Config.get('imageUrl')+'/user/i4.png'" class="t-img"/>
          <view class="t-txt">邀请统计</view>
        </view>
        <view class="inviteList">
          <view class="invite">
            <view class="i-sum">
              {{ stat.inviteCount }}
            </view>
            <view class="i-t">
              我的邀请代理数
            </view>
            <image :src="$Config.get('imageUrl')+'/user/i10.png'" class="i-img"/>
          </view>
          <view class="invite">
            <view class="i-sum">
              {{ stat.inviteTotalAmount }}
            </view>
            <view class="i-t">
              邀请总业绩
            </view>
            <image :src="$Config.get('imageUrl')+'/user/i5.png'" class="i-img"/>
          </view>
        </view>

        <view class="title-1">
          <image :src="$Config.get('imageUrl')+'/user/i6.png'" class="t-img"/>
          <view class="t-txt">邀请奖励</view>
          <view class="right" @click="goReward()">
            <span class="text">邀请明细</span>
            <uni-icons type="forward" size="14" class="arrow" color="#1777FF"></uni-icons>
          </view>
        </view>
        <view class="equityIncentives">
          <image class="equityBg" :src="$Config.get('imageUrl')+'/user/i9.png'"/>
          <view class="p1">
            {{ stat.inviteTotalShare }}
          </view>
          <view class="p2">
            股权奖励
          </view>
        </view>
        <view class="equityBtn" v-if="userInfo && userInfo.userLevel == 2" @click="goEquity">立即邀请</view>
<!--        <view class="reward">-->
<!--          <view class="item">-->
<!--            <view class="r-sum">-->
<!--              1111-->
<!--            </view>-->
<!--            <view class="r-t">-->
<!--              股权奖励-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="item">-->
<!--            <view class="r-sum">-->
<!--              1111<span>万</span>-->
<!--            </view>-->
<!--            <view class="r-t">-->
<!--              现金奖励-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
      </view>
<!--      <view class="box b1 b3">-->
<!--        <view class="title">-->
<!--          <span>BPW中心</span>-->
<!--          <view class="right" @click="goBpw">-->
<!--            <span class="text">去兑换</span>-->
<!--            <uni-icons type="forward" size="14" class="arrow" color="#1777FF"></uni-icons>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="bpw">-->
<!--          <view class="item" style="padding-right: 20rpx;">-->
<!--            <view class="b-num b-m-10">-->
<!--              {{ bpw }}-->
<!--            </view>-->
<!--            <view class="b-t">-->
<!--              BPW余额-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="item right">-->
<!--            <view class="b-l b-m-10">-->
<!--              <span class="b-t">可兑换份额</span><span class="b-num">{{ stat.availableShareAmount }}</span>-->
<!--            </view>-->
<!--            <view class="b-l">-->
<!--              <span class="b-t">兑换比例</span>-->
<!--              <span class="b-num">-->
<!--                10 : 1-->
<!--              </span>-->
<!--            </view>-->
<!--            <span class="b-tip">10份股权兑换1个BPW</span>-->
<!--          </view>-->
<!--        </view>-->
<!--&lt;!&ndash;        <view class="bpw-link" @click="goKlines">&ndash;&gt;-->
<!--&lt;!&ndash;          <image :src="$Config.get('imageUrl')+'/user/i8.png'" class="bpw-bg"/>&ndash;&gt;-->
<!--&lt;!&ndash;          <view class="left">&ndash;&gt;-->
<!--&lt;!&ndash;            <view class="line1">行情中心</view>&ndash;&gt;-->
<!--&lt;!&ndash;            <view class="line2">立即进入 ></view>&ndash;&gt;-->
<!--&lt;!&ndash;          </view>&ndash;&gt;-->
<!--&lt;!&ndash;          <image :src="$Config.get('imageUrl')+'/user/i7.png'" class="right"/>&ndash;&gt;-->
<!--&lt;!&ndash;        </view>&ndash;&gt;-->
<!--      </view>-->
      <view class="box b1 b2">
        <view class="title">
          <span>分红中心</span>
          <view class="right" @click="showPopup">
            <span class="text">银行空中分账</span>
            <text class="iconfont icon-help arrow"></text>
          </view>
        </view>

        <view class="title-1">
          <image :src="$Config.get('imageUrl')+'/user/i4.png'" class="t-img"/>
          <view class="t-txt">我的分红</view>
        </view>
        <view class="select">

          <view class="item" :class="[showType1 == 'day' ? 'active' : '']" @click="setShowType1('day')">日收益</view>
          <view class="item" :class="[showType1 == 'month' ? 'active' : '']" @click="setShowType1('month')">月收益</view>
          <view class="item" :class="[showType1 == 'quarter' ? 'active' : '']" @click="setShowType1('quarter')">季收益</view>
          <view class="item" :class="[showType1 == 'year' ? 'active' : '']" @click="setShowType1('year')">年收益</view>
        </view>
        <view class="day-data" :style="{'display':showType1=='day'?'grid':'none'}">
          <view class="day-item">
            <image :src="$Config.get('imageUrl')+'/user/i11.png'" class="day-icon"/>
            <view class="day-label" @click="popup1 = true">
              <view>
                总分红利润：
              </view>
              <text class="iconfont icon-help arrow" style="color: #1777FF;"></text>
            </view>
            <view class="day-value">{{getNumber(board.totalRewardPoolAmount)}}<span>元</span></view>
          </view>
          <view class="day-item day-item1">
            <image :src="$Config.get('imageUrl')+'/user/i11.png'" class="day-icon"/>
            <view class="day-label">累积分红池：</view>
            <view class="day-value">{{getNumber(board.sumRewardPoolAmount)}}<span>元</span></view>
          </view>
          <view class="day-item day-item2">
            <image :src="$Config.get('imageUrl')+'/user/i11.png'" class="day-icon"/>
            <view class="day-label">我的自持分红：</view>
            <view class="day-value">{{getNumber(board.myOrderRewardAmount)}}<span>元</span></view>
          </view>
          <view class="day-item day-item3">
            <image :src="$Config.get('imageUrl')+'/user/i11.png'" class="day-icon"/>
            <view class="day-label">我的邀请分红：</view>
            <view class="day-value">{{getNumber(board.myInviteRewardAmount)}}<span>元</span></view>
          </view>
        </view>
        <view class="chart" :style="{'display':chart1Data.length > 0 && showType1!='day' && !chart1Loading?'block':'none'}" >
          <l-echart ref="chart1"></l-echart>
          <view class="customTooltips" :style="{left: chart1.position[0] + 'px',top: chart1.position[1] + 'px'}" v-if="chart1.params.length && chart1.position.length">
            <view v-for="(item,i) in chart1.params" :key="i">
              <view>
                <view class="l1">{{item.axisValue}}分红</view>
                <view><span>{{item.value}}</span></view>
              </view>
            </view>
          </view>
        </view>
        <view class="chart" :style="{'display':chart1Loading?'none':'block'}" v-if="chart1Data.length == 0 && showType1!='day'" >
          <empty :isLoading="false" :custom-style="{ padding: '180rpx 50rpx' }" tips="暂无数据" />
        </view>
        <view class="chart chartLoading" :style="{display:chart1Loading?'flex':'none'}" v-if="showType1!='day'">
          <u-loading-icon ></u-loading-icon>
        </view>
        <view class="title-1">
          <image :src="$Config.get('imageUrl')+'/user/i4.png'" class="t-img"/>
          <view class="t-txt">税务中心</view>
        </view>
        <view class="chart" >
          <empty :isLoading="false" :custom-style="{ padding: '180rpx 50rpx' }" tips="暂无数据" />
        </view>
<!--        <view class="detail"  >-->
<!--          <view class="row">-->
<!--            <view class="label">本月累计分红金额：</view>-->
<!--            <view class="value">{{getNumber(5000)}}元</view>-->
<!--          </view>-->
<!--          <view class="row">-->
<!--            <view class="label">应缴个税比例：</view>-->
<!--            <view class="value">3%</view>-->
<!--          </view>-->
<!--          <view class="row">-->
<!--            <view class="label">次月应缴税费：</view>-->
<!--            <view class="value">{{getNumber(150)}}元</view>-->
<!--          </view>-->
<!--          <view class="row">-->
<!--            <view class="label">缴税状态：</view>-->
<!--            <view class="value">未缴</view>-->
<!--          </view>-->
<!--          <view class="row">-->
<!--            <view class="label">个人累计缴税金额：</view>-->
<!--            <view class="value">{{getNumber(5000)}}元</view>-->
<!--          </view>-->
<!--        </view>-->
        <view class="title-1">
          <image :src="$Config.get('imageUrl')+'/user/i4.png'" class="t-img"/>
          <view class="t-txt">分红结余</view>
        </view>
        <view class="select">
          <view class="item" :class="[showType3 == 'day' ? 'active' : '']" @click="setShowType3('day')">日收益</view>
          <view class="item" :class="[showType3 == 'month' ? 'active' : '']" @click="setShowType3('month')">月收益</view>
          <view class="item" :class="[showType3 == 'quarter' ? 'active' : '']" @click="setShowType3('quarter')">季收益</view>
          <view class="item" :class="[showType3 == 'year' ? 'active' : '']" @click="setShowType3('year')">年收益</view>
        </view>
        <!--        :style="{'display':chartLoading?'none':'flex'}"-->
        <view class="chart" :style="{display:chart3Loading?'none':'flex'}" v-if="chart3Data.length > 0">
          <l-echart ref="chart3"></l-echart>
          <view class="customTooltips" :style="{left: chart3.position[0] + 'px',top: chart3.position[1] + 'px'}" v-if="chart3.params.length && chart3.position.length">
            <view v-for="(item,i) in chart3.params" :key="i">
              <view>
                <view class="l1">{{item.axisValue}}利润</view>
                <view><span>{{item.value}}</span></view>
              </view>
            </view>
          </view>
        </view>
        <view class="chart" v-if="chart3Data.length == 0">
          <empty  :isLoading="false" :custom-style="{ padding: '180rpx 50rpx' }" tips="暂无数据" />
        </view>
        <view class="chart" :style="{display:chart3Loading?'flex':'none'}" >
          <u-loading-icon ></u-loading-icon>
        </view>
      </view>
    </view>
    <u-popup :show="popup" closeable round="24rpx" mode="center" @close="close">
      <view class="popup">
        <view class="title">股权分红制度</view>
        <view>股权分红采取银行空中分红的方式进行分红，具体分红规则如下：</view>
        <br/><br/>
        <view>
          1.分红规则:个人所持股比例*当然有效分红（当日净利润的50%）<br/>
          2.分红机构:中信银行<br/>
          3.分红时间:D+1 （具体时间以每日银行结算完毕为准）<br/>
          4.分红结余:如公司上月分红经核算分配后仍有结余，自动计入下月股东分红。例如：9月总净利润1个亿，在提取50%的发展基金后（即5000万），9月分红净利润50%即5000万，实际股权释放分配额只有50%，即所有股东分红净利润2500万，剩余未分配净利润2500万自动计入股东10月分红，以此类推。<br/>
        </view>
      </view>
    </u-popup>
    <u-popup :show="popup1" closeable round="24rpx" mode="center" @close="popup1 = false">
      <view class="popup">
        <view class="title">计算规则</view>
        <view>总分红利润：（累积未分红资金+昨日净利润分红）</view>
      </view>
    </u-popup>
    <u-popup :show="popup2" closeable round="24rpx" mode="center" @close="popup2 = false">
      <view class="popup">
        <view class="title">提示</view>
        <view>直属被邀请人购买订单，确认收货后第二天，计算推广股权奖励，目前限制一年有效期内被邀请人下单都有推广股权奖励。</view>
      </view>
    </u-popup>
	</view>
</template>

<script>
import { checkLogin ,getUserInfo,numTimes} from '@/core/app'
import myMixins from "./my.mixins";
export default {
  mixins: [myMixins],
  data() {
    return {
      // 首次加载
      isFirstload: true,
      // 当前用户信息
      userInfo: {},
      // 是否已登录
      isLogin: false,
      popup:false,
      popup1:false,
      popup2:false,
      stat:{
        usedShareAmount:0,
        shareAmount:0,
        shareRate:0,
        availableShareAmount:0,
        lockedShareAmount:0,
        totalOrderAmount:0,
        inviteCount:0,
        inviteTotalAmount:0,
        inviteTotalShare:0,
      },
      board:{
        totalRewardPoolAmount:0,
        sumRewardPoolAmount:0,
        myOrderRewardAmount:0,
        myInviteRewardAmount:0,
      },
      bpw:0,
      chart1Loading:true,
      chart2Loading:false,
      chart3Loading:false,
      chart4Loading:false,
      showType1:'day',
      showType2:'day',
      showType3:'day',
      chart1Data:[],
      chart2Data:[],
      chart3Data:[],
      chart4Data:[],
    }
  },
  onShow() {
    this.onRefreshPage();
  },
  mounted(){

  },
  methods: {
    onRefreshPage(){
        this.isLogin = checkLogin();
        if (this.isLogin) {
          // this.userInfo = getUserInfo();
          this.getUserInfo();
          this.init();
          this.getChart4()
          // this.getReward();
        }

    },
    init(){
      this.myStat();
      this.getMyBoard()
    },
    getUserLevel(level){
      switch (level) {
        case 0:
          return '普通用户'
          break;
        case 1:
          return 'VIP用户'
          break;
        case 2:
          return '消费型合伙人'
          break;
        case 3:
          return '原始股东'
          break;
        case 4:
          return '团队型股东'
          break;
        default:
          return '普通用户'
          break;
      }
    },
    handlePersonal() {
    },
    handleLogin() {
      !this.isLogin && this.$navTo('page_work/login/index')
    },
    close() {
      this.popup = false
    },
    showPopup(){
      this.popup = true
    },
    getNumTimes(val1,val2){
      return numTimes(val1,val2);
    },
    getNumber(value){
      //大数字显示万 123456789 显示 1234.5万 大数字显示亿 1234567890 显示 1234.5亿
      if(value>100000000){
        return this.toFixedWithoutRounding((value/100000000),2)+' 亿';
      }else if(value>10000){
        return this.toFixedWithoutRounding((value/10000),2)+' 万';
      } else {
        return value;
      }
    },
    toFixedWithoutRounding(number, precision){
      const factor = Math.pow(10, precision);
      const truncated = Math.trunc(number * factor) / factor;
      return truncated.toFixed(precision);
    },
    setShowType1(val){
      this.showType1 = val;
      if(val == 'day') {
        // this.getChart1Option(this.chart1Data)
      }else{
        this.getReward()
      }
    },
    setShowType2(val){
      this.showType2 = val;
      this.getChart2()
    },
    setShowType3(val){
      this.showType3 = val;
      this.getChart3()
    },
    getUserInfo(){
      this.$request.get('wx/auth/userInfo',{},false).then(res=>{
        this.userInfo = res.data;
      }).catch(err=>{
        this.$toast(err.errmsg)
      })
    },
    getReward(){
      let params = {
        showType:this.showType1
      }
      this.chart1Loading = true;
        this.$request.get('wx/reward/listByType',params,{load:false}).then(res=>{
        let data = res.data.items;
        this.chart1Data = data;
          this.$nextTick(()=>{
            setTimeout(()=>{
              this.getChart1Option(data)
            },100)
          })
      }).catch(err=>{
        this.$toast(err.errmsg)
      }).finally(()=>{
        this.chart1Loading = false;
      })
    },
    getChart2(){
      this.chart2Data = [];
      this.getChart2Option(this.chart2Data)
    },
    getChart3(){
      this.chart3Data = [];
      this.getChart3Option(this.chart3Data)
    },
    getChart4(){
      // this.chart4Data = [];
      // this.$nextTick(()=>{
      //   this.getChart4Option(this.chart4Data)
      // })
    }
  }
}
</script>

<style lang="scss">
.container{
  background: #F7F7F7;
  // 页面头部
  .main-header {
    position: relative;
    width: 100%;
    height: 412rpx;
    background-size: 100% 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding :0 30rpx;
    box-sizing: border-box;

    .bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .user-info {
      display: flex;
      align-items: center;
      height: 100rpx;
      flex: 1;
      z-index: 1;
      .user-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 30rpx;
        color: #FFF;
        .nick-name {
          display: flex;
          align-items: center;
          .name{
            font-size: 32rpx;
            line-height: 32rpx;
            font-weight: bold;
          }
        }

        .mobile {
          font-weight: 200;
          margin-left: 20rpx;
          font-size: 24rpx;
          line-height: 24rpx;
        }
        .userLevel1{
          margin-top: 15rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #FFFFFF;
          position: relative;
          margin-left: 30rpx;
          .level-icon{
            position: absolute;
            top: -1px;
            left: 0;
            width: 42rpx;
            height: 42rpx;
            .level-img{
              width: 100%;
              height: 100%;
              image{
                width: 100%;
                height: 100%;
              }
            }
          }
          .level-txt{
            background: linear-gradient(133deg, #F8A917 0%, #EFC672 100%);
            margin-left: 22rpx;
            padding-left:30rpx;
            padding-right:14rpx;
            height: 36rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #FFFFFF;
            border-radius: 14rpx;
          }

        }
        .userLevel{
          margin-top: 15rpx;
          display: flex;
          align-items: center;
          border-radius: 14rpx;
          background: linear-gradient(133deg, #F8A917 0%, #EFC672 100%);
          .level-icon{
            width: 38rpx;
            height: 38rpx;
            .level-img{
              width: 100%;
              height: 100%;
              image{
                width: 100%;
                height: 100%;
              }
            }
          }
          .level-txt{
            margin-left: 10rpx;
            padding-right:14rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #FFFFFF;
          }
        }
        .login-tips {
          margin-top: 12rpx;
          font-size: 30rpx;
        }
      }
      .setting{
        background: rgba(255,255,255,0.32);
        border-radius: 10rpx;
        padding: 10rpx 20rpx;
        display: flex;
        align-items: center;
        .set-img{
          width: 40rpx;
          height: 40rpx;
        }
        span{
          margin-left: 10rpx;
          color: #FFF;
          font-size: 32rpx;
          font-weight: 500;
        }
      }
    }
  }
  .content{
    padding: 0 40rpx;
    margin-top: -80rpx;
    //margin: -80rpx 40rpx 0 40rpx;
    position: relative;
    padding-bottom: 40rpx;
    .box{
      border-radius: 10rpx;
      background: rgb(255,255,255);
    }
    .b1{
      padding:40rpx;
      .title{
        font-size: 32rpx;
        font-weight: bold;
        color: #010812;
        padding-left: 20rpx;
        position: relative;
        height:44rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:before{
          content: '';
          position: absolute;
          left: 0;
          top: 2rpx;
          display: inline-block;
          width: 10rpx;
          height: 40rpx;
          background: #1777FF;
          margin-right: 20rpx;
          border-radius: 8rpx;
        }
        .left{
          display: flex;
          align-items: center;
          .text{
            font-size: 28rpx;
            font-weight: 400;
            color: #1777FF;
          }
          .arrow{
            color: #1777FF;
            font-size: 32rpx;
            margin-left: 6rpx;
            //margin-top: -6rpx;
            width: 32rpx;
            height: 32rpx;
            /deep/ text{
              display: block;
            }
          }
        }
        .right{
          display: flex;
          align-items: center;
          .text{
            font-size: 28rpx;
            font-weight: 400;
            color: #1777FF;
          }
          .arrow{
            color: #1777FF;
            font-size: 28rpx;
            margin-left: 6rpx;
            margin-top: -6rpx;
            width: 28rpx;
            height: 28rpx;
            /deep/ text{
              display: block;
            }
          }
        }
        .arrow{
          width: 32rpx;
          height: 32rpx;
        }
      }
      .order{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .o-img{
          width:88rpx;
          height: 88rpx;
          margin-bottom: 8rpx;
        }
        .sum{
          font-size: 48rpx;
          font-weight: bold;
          color: #010812;
          margin-bottom: 20rpx;
        }
        .o-t{
          font-size: 28rpx;
          font-weight: 500;
          color: #010812;
        }
      }
    }
    .box1{
      display: flex;
      align-items: center;
      gap: 20rpx;
      margin-top: 20rpx;
      .shareholding{
        padding: 20rpx;
        flex-grow: 1;
        flex-basis: 0;
        background: rgba(255,255,255,0.6);
        border-radius: 10rpx;
        .s-img{
          width: 60rpx;
          height: 60rpx;
          .img{
            width: 100%;
            height: 100%;
          }
        }
        .s-num{
          font-size: 48rpx;
          font-weight: bold;
          color: #010812;
          text-align: center;
          margin-bottom: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          gap:20rpx;
        }
        .s-txt{
          font-size: 28rpx;
          font-weight: 500;
          text-align: center;
          color: #010812;
          margin-bottom: 20rpx;
        }
      }
    }
    .b2{
      margin-top: 20rpx;
      .title-1{
        background: linear-gradient(90deg, rgba(23,119,255,0.1) 0%, rgba(23,119,255,0) 100%);
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        padding:20rpx;
        padding-right: 0;
        margin-top: 40rpx;
        .t-img{
          width: 48rpx;
          height: 48rpx;
        }
        .t-txt{
          font-size: 32rpx;
          font-weight: bold;
          color: #010812;
          margin-left: 20rpx;
          flex: 1;
        }
        .right{
          display: flex;
          align-items: center;
          .text{
            font-size: 28rpx;
            font-weight: 400;
            color: #1777FF;
          }
          .arrow{
            font-weight: 700;
            color: #1777FF;
            font-size: 28rpx;
            margin-left: 6rpx;
            margin-top: -6rpx;
            width: 28rpx;
            height: 28rpx;
          }
        }
      }
      .inviteList{
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        .invite{
          flex-grow: 1;
          flex-basis: 0;
          padding-top:20rpx;
          .i-img{
            width:80rpx;
            height:80rpx;
            margin: 0 auto;
            margin-top: 0rpx;
            display: block;
          }
          .i-sum{
            font-size: 48rpx;
            font-weight: bold;
            color: #010812;
            margin-bottom: 14rpx;
            text-align: center;
          }
          .i-t{
            font-size: 28rpx;
            font-weight: 500;
            color: #010812;
            text-align: center;
          }
        }
      }
      .equityIncentives{
        position: relative;
        text-align: center;
        padding-top: 60rpx;
        padding-bottom: 80rpx;
        .equityBg{
          position: absolute;
          width: 114px;
          height: 322rpx;
          left:51%;
          top:-80rpx;
          transform: translateX(-50%);
        }
        .p1{
          font-size: 48rpx;
          font-weight: bold;
          color: #010812;
          margin-bottom: 20rpx;
        }
        .p2{
          font-size: 28rpx;
          font-weight: 500;
          color: #010812;
        }
      }
      .equityBtn{
        margin-top: 40rpx;
        height: 88rpx;
        background: #1777FF;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #FFFFFF;
      }
      .reward{
        display: flex;
        margin-top: 20rpx;
        .item{
          flex-grow: 1;
          flex-basis: 0;
          padding:20rpx;
          text-align: center;
          position: relative;
          .r-sum{
            font-size: 48rpx;
            font-weight: bold;
            color: #010812;
            margin-bottom: 16rpx;
            span{
              font-size: 28rpx;
              font-weight: 500;
              margin-left: 8rpx;
            }
          }
          .r-t{
            font-size: 28rpx;
            font-weight: 500;
            color: #010812;
          }
          &:first-child::after{
            content: '';
            position: absolute;
            width: 1px;
            height: 60rpx;
            background: rgba(23, 119, 255, 0.2);
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
    .b3{
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      .bpw{
        display: flex;
        margin-top: 20rpx;
        .item{
          padding:10rpx;
          text-align: center;
          position: relative;
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .b-num{
            font-size: 40rpx;
            font-weight: bold;
            color: #010812;
          }
          .b-t{
            font-size: 32rpx;
            font-weight: 500;
            color: #010812;
          }
          .b-t1{
            font-size: 32rpx;
          }
          .b-l{
            display: flex;
            align-items: center;
            gap:20rpx;
          }
          .b-tip{
            font-size: 20rpx;
            font-weight: 300;
            color: #6F6F6F;
            text-align: left;
          }
          .b-m-10{
            margin-bottom: 20rpx;
          }
          .b-m-20{
            margin-bottom: 40rpx;
          }
          &:first-child::after{
            content: '';
            position: absolute;
            width: 1px;
            height: 60rpx;
            background: rgba(23, 119, 255, 0.2);
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .right{
          padding-left: 40rpx;
        }
      }
      .bpw-link{
        width: 100%;
        height: 134rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .bpw-bg{
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        .left{
          padding: 20rpx;
          .line1{
            font-size: 32rpx;
            font-weight: bold;
            color: #1777FF;
            margin-bottom: 10rpx;
          }
          .line2{
            font-size: 28rpx;
            font-weight: 500;
            color: #1777FF;
          }
        }
        .right{
          width: 100rpx;
          height: 100rpx;
          margin-right: 20rpx;
        }
      }
    }
    .select{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14rpx;
      margin-top: 40rpx;
      .item{
        border-radius: 6rpx;
        border: solid 1px #999;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        padding: 0 28rpx;
      }
      .active{
        border: solid 1px #1777FF;
        font-weight: 500;
        color: #1777FF;
      }
    }
    .chart{
      width: 100%;
      height: 500rpx;
      margin-top: 40rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      .customTooltips {
        position: absolute;
        z-index: 1;
        background: #FFF;
        padding: 20rpx;
        border: 1px solid rgba(23,119,255,0.2);
        border-radius: 10rpx;
        .l1{
          padding-left: 30rpx;
          position: relative;
          font-size: 24rpx;
          &::before{
            content: '';
            position: absolute;
            left: 0;
            top: 14rpx;
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background: #1777FF;
          }
        }
        span{
          font-size: 40rpx;
          font-weight: bold;
          color: #010812;
          margin-right: 10rpx;
          margin-left: 30rpx;
        }
      }
    }
    .day-data{
      display:grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 60rpx;
      padding: 30rpx 0;
      .day-item{
        border-radius: 10rpx;
        width: 260rpx;
        height: 260rpx;
        box-sizing: border-box;
        background: linear-gradient(180deg, #F9F9F9 0%, rgba(140,153,227,0.1) 100%);

        padding: 12rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        .day-icon{
          position: absolute;
          right: 20rpx;
          top: 20rpx;
          width: 64rpx;
          height: 64rpx;
        }
        .day-label{
          font-size: 25rpx;
          font-weight: bold;
          color: #000000;
          margin-top: 20rpx;
          display: flex;
          align-items: center;

        }
        .day-value{
          font-size: 34rpx;
          font-weight: bold;
          text-align: right;
          span{
            font-size: 24rpx;
            margin-left: 14rpx;
          }
        }
      }
      .day-item1{
        background: linear-gradient(180deg, #F9F9F9 0%, rgba(23,119,255,0.1) 100%);
      }
      .day-item2{
        background: linear-gradient(180deg, #F9F9F9 0%, rgba(140,211,227,0.1) 100%);
      }
      .day-item3{
        background: linear-gradient(180deg, #F9F9F9 0%, rgba(140,153,227,0.1) 100%);
      }
      .day-tips{
        font-size: 24rpx;
        margin-top: -10rpx;
        color:#a29e9e;
      }
    }
    .detail{
      padding-top: 20rpx;
      .row{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 32rpx;
        font-weight: bold;
        color: #000000;
        padding:20rpx 0;
        .label{

        }
        .value{

        }
      }

    }
  }
  .popup{
    padding:34rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 48rpx;
    box-sizing: border-box;
    width: 600rpx;
    margin: 0 auto;
    .title{
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      text-align: center;
      margin-bottom: 10rpx;
    }
  }
}
</style>
